<template>
  <div class="box h-[100vh]">
    <div class="navbar bg-base-100 shadow-sm">
      <div class="navbar-start">
        <div class="dropdown">
          <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h7"
              />
            </svg>
          </div>
          <div
            tabindex="0"
            class="dropdown-content bg-base-200 text-base-content rounded-box top-px h-[30.5rem] max-h-[calc(100vh-8.6rem)] overflow-y-auto border border-white/5 shadow-2xl outline-1 outline-black/5 mt-16"
          >
            <ul class="menu w-56">
              <li v-for="(v, k) in urlData" :key="k" @click="go(v)">
                <a>{{ v.cname }}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="navbar-center">
        <router-link to="/index" custom v-slot="{ navigate }">
          <a class="btn btn-ghost text-xl" @click="navigate">有趣的页面</a>
        </router-link>
      </div>
      <div class="navbar-end">
        <div title="Change Theme" class="dropdown dropdown-end block">
          <div
            tabindex="0"
            role="button"
            class="btn group btn-sm gap-1.5 px-1.5 btn-ghost"
            aria-label="Change Theme"
          >
            <div
              class="bg-base-100 group-hover:border-base-content/20 border-base-content/10 grid shrink-0 grid-cols-2 gap-0.5 rounded-md border p-1 transition-colors"
            >
              <div class="bg-base-content size-1 rounded-full"></div>
              <div class="bg-primary size-1 rounded-full"></div>
              <div class="bg-secondary size-1 rounded-full"></div>
              <div class="bg-accent size-1 rounded-full"></div>
            </div>
            <svg
              width="12px"
              height="12px"
              class="mt-px hidden size-2 fill-current opacity-60 sm:inline-block"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 2048 2048"
            >
              <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
            </svg>
          </div>
          <div
            tabindex="0"
            class="dropdown-content bg-base-200 text-base-content rounded-box top-px h-[30.5rem] max-h-[calc(100vh-8.6rem)] overflow-y-auto border border-white/5 shadow-2xl outline-1 outline-black/5 mt-16"
          >
            <ul class="menu w-56">
              <li class="menu-title text-xs">主题</li>
              <!--[-->
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="light"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="light"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">light</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="dark"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="dark"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">dark</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="cupcake"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="cupcake"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">cupcake</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="bumblebee"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="bumblebee"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">bumblebee</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="emerald"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="emerald"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">emerald</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="corporate"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="corporate"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">corporate</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="synthwave"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="synthwave"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">synthwave</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="retro"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="retro"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">retro</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="cyberpunk"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="cyberpunk"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">cyberpunk</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="valentine"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="valentine"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">valentine</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="halloween"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="halloween"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">halloween</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="garden"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="garden"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">garden</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="forest"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="forest"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">forest</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="aqua"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="aqua"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">aqua</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="lofi"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="lofi"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">lofi</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="pastel"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="pastel"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">pastel</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="fantasy"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="fantasy"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">fantasy</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="wireframe"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="wireframe"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">wireframe</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="black"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="black"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">black</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="luxury"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="luxury"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">luxury</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="dracula"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="dracula"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">dracula</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="cmyk"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="cmyk"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">cmyk</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="autumn"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="autumn"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">autumn</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="business"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="business"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">business</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="acid"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="acid"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">acid</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="lemonade"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="lemonade"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">lemonade</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="night"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="night"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">night</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="coffee"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="coffee"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">coffee</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="winter"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="winter"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">winter</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="dim"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="dim"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">dim</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="nord"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="nord"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">nord</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="sunset"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="sunset"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">sunset</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="caramellatte"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="caramellatte"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">caramellatte</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="abyss"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="abyss"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">abyss</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="gap-3 px-2"
                  data-set-theme="silk"
                  data-act-class="[&amp;_svg]:visible"
                >
                  <div
                    data-theme="silk"
                    class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
                  >
                    <div class="bg-base-content size-1 rounded-full"></div>
                    <div class="bg-primary size-1 rounded-full"></div>
                    <div class="bg-secondary size-1 rounded-full"></div>
                    <div class="bg-accent size-1 rounded-full"></div>
                  </div>
                  <div class="w-32 truncate">silk</div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="invisible h-3 w-3 shrink-0"
                  >
                    <path
                      d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"
                    ></path>
                  </svg>
                </button>
              </li>
              <!--]-->
              <li></li>
              <li>
                <a href="/theme-generator/">
                  <svg
                    width="24"
                    height="24"
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-4 w-4 fill-current"
                    viewBox="0 0 512 512"
                  >
                    <path d="M96,208H48a16,16,0,0,1,0-32H96a16,16,0,0,1,0,32Z"></path>
                    <line x1="90.25" y1="90.25" x2="124.19" y2="124.19"></line>
                    <path
                      d="M124.19,140.19a15.91,15.91,0,0,1-11.31-4.69L78.93,101.56a16,16,0,0,1,22.63-22.63l33.94,33.95a16,16,0,0,1-11.31,27.31Z"
                    ></path>
                    <path
                      d="M192,112a16,16,0,0,1-16-16V48a16,16,0,0,1,32,0V96A16,16,0,0,1,192,112Z"
                    ></path>
                    <line x1="293.89" y1="90.25" x2="259.95" y2="124.19"></line>
                    <path
                      d="M260,140.19a16,16,0,0,1-11.31-27.31l33.94-33.95a16,16,0,0,1,22.63,22.63L271.27,135.5A15.94,15.94,0,0,1,260,140.19Z"
                    ></path>
                    <line x1="124.19" y1="259.95" x2="90.25" y2="293.89"></line>
                    <path
                      d="M90.25,309.89a16,16,0,0,1-11.32-27.31l33.95-33.94a16,16,0,0,1,22.62,22.63l-33.94,33.94A16,16,0,0,1,90.25,309.89Z"
                    ></path>
                    <path
                      d="M219,151.83a26,26,0,0,0-36.77,0l-30.43,30.43a26,26,0,0,0,0,36.77L208.76,276a4,4,0,0,0,5.66,0L276,214.42a4,4,0,0,0,0-5.66Z"
                    ></path>
                    <path
                      d="M472.31,405.11,304.24,237a4,4,0,0,0-5.66,0L237,298.58a4,4,0,0,0,0,5.66L405.12,472.31a26,26,0,0,0,36.76,0l30.43-30.43h0A26,26,0,0,0,472.31,405.11Z"
                    ></path>
                  </svg>
                  <div class="grow text-sm font-bold">做一个主题!</div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="overflow-auto h-[calc(100%_-_64px)] grid place-items-center">
      <router-view class="scale-in-center" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { themeChange } from 'theme-change'
import urlData from '../commom/url'
import { useRouter } from 'vue-router'

const router = useRouter()
const go = (i) => {
  router.push({ path: i.path })
}
onMounted(() => {
  themeChange(false)
})
</script>
<style scoped>
.scale-in-center {
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
</style>
